/**
 * hash类型的值显示
 */
Vue.component("hash", {
    template :
        `
        <div>
            <i-table highlight-row :columns="columns" :data="dealValue"/>
            <Modal v-model="asJson" title="json格式显示...">
                <pre style="white-space: pre-wrap;word-wrap: break-word;">{{asJsonText}}</pre>
            </Modal>
            <Modal v-model="asEdit" title="数据编辑...">
                <Input v-model="dataEdit" type="textarea" :autosize="{minRows: 5, maxRows: 10}" placeholder="请输入..."/>
                <div slot="footer">
                    <i-button type="primary" @click="editSubmit">提交</i-button>
                    <i-button type="ghost" @click="editCancel" style="margin-left: 8px">取消</i-button>
                </div>
            </Modal>
            <Modal v-model="asAdd" title="数据增加...">
                <Row align="middle" justify="center">
                    <i-col span="3" align="middle"> key: </i-col>
                    <i-col span="9">
                        <Input type="textarea" v-model="dataAddKey" :autosize="{minRows: 5, maxRows: 10}" placeholder="请输入..."/>
                    </i-col>
                    <i-col span="3" align="middle"> value: </i-col>
                    <i-col span="9">
                        <Input type="textarea" v-model="dataAddValue" :autosize="{minRows: 5, maxRows: 10}" placeholder="请输入..."/>
                    </i-col>
                </Row>
                <div slot="footer">
                    <i-button type="primary" @click="addSubmit">提交</i-button>
                    <i-button type="ghost" @click="addCancel" style="margin-left: 8px">取消</i-button>
                </div>
            </Modal>
            <input type="hidden" id="copyValue">
        </div>
        `,
    props : ["data"],
    data : function() {
        return {
            columns: [
                {
                    type: "index",
                    width: 60,
                    align: "center"
                },
                {
                    title: "键",
                    key: "key",
                    render: (h, params) => {
                        return h("Poptip", {
                            props : {
                                trigger : "hover",
                                placement : "top-start"
                            }
                        }, [
                            h("div", params.row.key),
                            h("div", {
                                slot : "content"
                            }, [
                                h("i-button", {
                                    props : {
                                        type : "text",
                                        size : "small"
                                    },
                                    on : {
                                        click : () => {
                                            this.showAsJson('key', params.row._index);
                                        }
                                    }
                                }, "以json格式查看"),
                                h("i-button", {
                                    props : {
                                        type : "text",
                                        size : "small"
                                    },
                                    on : {
                                        click : () => {
                                            this.toCopy('key', params.row._index);
                                        }
                                    }
                                }, "复制"),
                                h("i-button", {
                                    props : { type : "text", size : "small" },
                                    on : {
                                        click : () => {
                                            this.toEdit(params.row.key, params.row._index, "key");
                                        }
                                    }
                                }, "编辑")
                            ])
                        ]);
                    }
                },
                {
                    title: "值",
                    key: "value",
                    render: (h, params) => {
                        return h("Poptip", {
                            props : {
                                trigger : "hover",
                                placement : "top-start"
                            }
                        }, [
                            h("div", params.row.value),
                            h("div", {
                                slot : "content"
                            }, [
                                h("i-button", {
                                    props : {
                                        type : "text",
                                        size : "small"
                                    },
                                    on : {
                                        click : () => {
                                            this.showAsJson('value', params.row._index);
                                        }
                                    }
                                }, "以json格式查看"),
                                h("i-button", {
                                    props : {
                                        type : "text",
                                        size : "small"
                                    },
                                    on : {
                                        click : () => {
                                            this.toCopy('value', params.row._index);
                                        }
                                    }
                                }, "复制"),
                                h("i-button", {
                                    props : { type : "text", size : "small" },
                                    on : {
                                        click : () => {
                                            this.toEdit(params.row.value, params.row._index, "value");
                                        }
                                    }
                                }, "编辑")
                            ])
                        ]);
                    }
                },
                {
                    title : "操作",
                    key : "action",
                    align : "center",
                    render : (h, params) => {
                        let returnValue = [
                            h("i-button", {
                                props : { type : "primary", size : "small"},
                                on : {
                                    click : () => {
                                        this.toDelete(params.row._index);
                                    }
                                }
                            }, "删除")
                        ];
                        if(params.row._index == 0){
                            returnValue.push(
                                h("i-button", {
                                    props : { type : "text", size : "small"},
                                    style : { "margin-left" : "8px" },
                                    on : {
                                        click : () => {
                                            this.toAdd(params.row._index);
                                        }
                                    }
                                }, "增加一行")
                            );
                        }
                        return returnValue;
                    }
                }
            ],
            asJson: false,
            asJsonText: "",
            dataArray: [],
            dataIndex: null,
            dataKey: null,
            asEdit : false,
            dataEdit : null,
            keyEdit : null,
            asAdd : false,
            dataAddKey : "",
            dataAddValue : ""
        };
    },
    methods : {
        showAsJson: function (key, index) {
            var txt = this.dataArray[index][key], tempValue;
            this.asJson = true;
            try {
                tempValue = JSON.parse(txt);
            }catch (e){
                tempValue = txt;
            }
            this.asJsonText = tempValue;
        },
        toCopy : function (key, index) {
            this.dataIndex = index;
            this.dataKey = key;
            this.$el.children.copyValue.click();
        },
        toEdit : function (value, index, type) {
            var obj = this.dataArray[index];
            this.dataIndex = index;
            this.keyEdit = type;
            this.dataEdit = obj[type];
            this.asEdit = true;
        },
        toDelete : function (index) {
            let newArray = [];
            for(let i in this.dataArray){
                if(i != index){
                    newArray.push(this.dataArray[i])
                }
            }
            this.data.value = JSON.stringify(newArray);
            this.$emit("updateKey", this.data);
        },
        toAdd : function () {
            this.asAdd = true;
        },
        editSubmit : function () {
            let obj = this.dataArray[this.dataIndex];
            obj[this.keyEdit] = this.dataEdit;
            this.data.value = JSON.stringify(this.dataArray);
            this.asEdit = false;
            this.$emit("updateKey", this.data);
        },
        editCancel : function () {
            this.asEdit = false;
        },
        addSubmit : function () {
            this.dataArray.push({
                key : this.dataAddKey,
                value : this.dataAddValue
            });
            this.data.value = JSON.stringify(this.dataArray);
            this.asAdd = false;
            this.dataAddKey = "";
            this.dataAddValue = "";
            this.$emit("updateKey", this.data);
        },
        addCancel : function () {
            this.asAdd = false;
        }
    },
    computed : {
        dealValue : function () {
            var array = JSON.parse(this.data.value);
            this.dataArray = JSON.parse(this.data.value);
            return array;
        }
    },
    created : function () {
        var that = this, clipboard = new Clipboard("#copyValue", {
            text : function () {
                return that.dataArray[that.dataIndex][that.dataKey];
            }
        });
        clipboard.on("success", function(e) {
            that.$Message.success("value复制成功...");
        });
        clipboard.on("error", function(e) {
            that.$Message.error("value复制失败...");
        });
    }
});